{% extends "mainPage.html" %}
{% load static %}
{% block logout_Operate %}
<a href="{% url 'userExit' %}">注销</a>
{% endblock %}
{% block main_body %}
<script src="{% static 'js/mdOfOperation.js' %}"></script>
<script src="{% static 'js/uploadImg.js' %}"></script>
{#<script src="{% static '/static/config.js' %}" />    #}
<div id="main_body">
<fieldset class="Web_Operation">
    <legend>
        <a href="{{ return_url }}"><h2 style="display: inline"><|返回</h2></a>
        <span style="display: inline;width: 10px">:  :  :</span>
        <h3 style="display: inline">   Markdown Editor:温馨提示，点击跳转其他页面前请先保存，否则信息会丢失!</h3>
    </legend>
    <form method="post" enctype="multipart/form-data" action="{% url 'edit_markdown' %}">
        {% csrf_token %}
        <div class="row_edit">
            <input type="submit" value="读取文件" id="get_config" class="button_class"/>
            <input name="flag" id="flag" type="checkbox" style="position: relative;margin-left: 5px;left: 20px;"/>
            <span style="position: relative;margin-left: 5px;left: 10px;">bak</span>
            <select name="option" class="select" id="type_op" style="left:10px">
                {% for sp in upload_option %}
                   <option value="{{ sp }}">{{ sp }}</option>
                {% endfor %}
            </select>
            <select name="filepath" class="select" id="files" style="width: 450px;left:15px">
                {% for sp in fileList %}
                   <option value="{{ sp }}">{{ sp }}</option>
                {% endfor %}
            </select>
            <input class="button_class" type="button" id="saveFile_md" value="保存">
            <span class="button_class"><a href="{% url 'fileList' %}">下载MarkDown文件</a></span>
            {% if filepath %}
            <span class="button_class"><a href="{% url 'exitEditor' %}?filename={{ filepath }}">退出编辑</a></span>
            <span class="button_class" style="background: #bce8f1">
                当前编辑者有：<input type="text" id="cur_editors" value="{{ cur_editor }}" hidden>{{ cur_editor }}
            </span>
            {% endif %}

        </div>
        <div id="test-editor">
            <textarea name="content_md" style="display:none;" id="content_md">{{content}}</textarea>
        </div>
    </form>
    <script src="{% static 'editor/lib/jquery.flowchart.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'editor/css/editormd.min.css' %}">
    <script src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript">
        var editor;
        $(function() {
            var editor = editormd("test-editor", {
                width  : "100%",
                height : "670px",
                path   : "{% static 'editor/lib/' %}",
                flowChart : true,
                tocm: true,
                //watch: false,
                // 上传图片
                imageUpload : true,
                imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "txt"],
                imageUploadURL : "/markdown/uploadImage/", //注意你后端的上传图片服务地址
                onload : function() {
                        console.log('onload function')
                        initPasteDragImg(this); //必须
                    }
            });
        //                var md_content = encodeURIComponent(editor.getMarkdown());
        });
    </script>
</fieldset>
</div>
{% endblock %}


